@import "./item-option.vars";

// Item Option
// --------------------------------------------------

.item-option-button {
  @include padding(0, .7em);

  width: 100%;
  height: 100%;

  border: 0;
  font-size: 1em;

  color: inherit;
  background: none;

  &:active,
  &:focus {
    outline: none;
  }
}

ion-item-options .item-option-button-inner {
  flex-direction: column;
}

.item-option-button-inner {
  display: flex;

  flex-flow: row nowrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}

.item-option-button [slot="icon-only"] {
  @include padding(0);

  min-width: .9em;

  font-size: 1.8em;
}


// Item Expandable Animation
// --------------------------------------------------

.item-option-expandable {
  flex-shrink: 0;

  transition-duration: 0;
  transition-property: none;
  transition-timing-function: cubic-bezier(.65, .05, .36, 1);
}

.item-sliding-active-swipe-right .item-options-right .item-option-expandable {
  transition-duration: .6s;
  transition-property: padding-left;

  @include multi-dir() {
    // scss-lint:disable PropertySpelling
    padding-left: 90%;
  }

  @include ltr() {
    order: 1;
  }

  @include rtl() {
    order: -1;
  }
}

.item-sliding-active-swipe-left .item-options-left .item-option-expandable {
  transition-duration: .6s;
  transition-property: padding-right;

  @include multi-dir() {
    // scss-lint:disable PropertySpelling
    padding-right: 90%;
  }

  @include ltr() {
    order: -1;
  }

  @include rtl() {
    order: 1;
  }
}
